<template>
  <div id="app">
    <div class="title">
      <div class="btn" @click="msg='Login'">登录</div>
      <div class="btn" @click="msg='Register'">注册</div>
    </div>
    <component :is="msg"></component>
  </div>
</template>

<script>
//这里的from路径根据自己的布局更改路径
import Login from './Login.vue'
import Register from './Register.vue'
export default {
  name: 'MainApp',
  data(){
    return{
      msg:"Login"
    }
  },
  components: {
    Login,
    Register
  }
}
</script>

<style>
.title{
  text-align: center;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.btn {
  background-color: rgb(210,193,326);
  border-radius:28px;
  border:1px solid #ffffff;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:17px;
  padding:16px 31px;
  text-decoration:none;
  text-shadow:0px 1px 0px #2f6627;
  margin: 10px 20px;
}
.btn:hover {
  background-color:rgb(180,193,237);
}
.btn:active {
  position:relative;
  top:1px;
}
</style>